<template>
  <div class="overflow-y-auto h-[90vh] p-3 mb-9 pb-20">
    <!--  功能模式 -->
    <div v-for="knowledge in defaultWelcomeMessage"
         @click="selectKnowledge(knowledge)"
         :class="{'bg-gray-100': selectedKnowledge?.id === knowledge.id}"
         class="flex items-center mb-4 cursor-pointer click:bg-gray-100 p-2 rounded-md">
      <div class="w-12 h-12 bg-gray-300 rounded-full mr-3">
        <div v-html="knowledge.avatarUrl"/>
      </div>
      <div class="flex-1">
        <h2 class="text-base font-black">{{ knowledge.name }}</h2>
        <p class="text-gray-400">{{ knowledge.description }}</p>
      </div>
    </div>

    <!-- 知识库模式-->
    <div @click="selectKnowledge(knowledge)" v-for="knowledge in knowledges"
         :class="{'bg-gray-100':selectedKnowledge?.id === knowledge.id}"
         class="flex items-center mb-4 cursor-pointer click:bg-gray-100 p-2 rounded-md">
      <div class="w-12 h-12 bg-gray-300 rounded-full mr-3">
        <img :src="baseURL + knowledge.avatarUrl" alt="User Avatar"
             class="w-12 h-12 rounded-full">
      </div>
      <div class="flex-1">
        <h2 class="text-base font-black">{{ knowledge.name }}</h2>
        <p class="text-gray-400">{{ knowledge.description }}</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="AiPromptsDialog">
import {fetchDataList} from "/@/api/knowledge/aiDataset";
import type {Dataset} from "/@/views/knowledge/aiChat/ts";
import {defaultWelcomeMessage} from "/@/views/aiknowledge/aiChat/ts/gpt";

const emit = defineEmits(['refresh']);
const knowledges = ref<Dataset[]>([]);
// 默认选择第一个【自由模式】
const selectedKnowledge = ref<Dataset>(defaultWelcomeMessage[0]);

const selectKnowledge = (knowledge: Dataset) => {
  selectedKnowledge.value = knowledge
  emit('refresh', knowledge)
}

const fetchKnowledges = async () => {
  const {data} = await fetchDataList();
  knowledges.value = data;
};

onMounted(() => {
  fetchKnowledges()
})
</script>
